import React from 'react'
import { Badge, TabBar } from 'antd-mobile'
import {
  GlobalOutline,
  MovieOutline,
  AppOutline
} from 'antd-mobile-icons'
import './Tabber.css'
import { useNavigate } from 'react-router-dom'

function Tabber() {
  const navigate = useNavigate()
  const { pathname } = location
  const tabs = [
    {
      key: "/home",
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: "/eniter",
      title: '病友圈',
      icon: <GlobalOutline />,
    },
    {
      key: "/look",
      title: '视频',
      icon: <MovieOutline />,
    },
  ]
  return (
    <div>
      <TabBar activeKey={pathname} className='tabb' onChange={key => navigate(key)}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  )
}

export default Tabber
